<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500"></canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('physicsCanvas');
            const ctx = canvas.getContext('2d');

            // Style settings
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.lineWidth = 2;
            ctx.font = '24px serif';

            const origin = { x: 150, y: 250 };

            // Helper function to draw an arrowhead
            function drawArrowhead(ctx, toX, toY, angle, size) {
                ctx.save();
                ctx.translate(toX, toY);
                ctx.rotate(angle);
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(-size, -size / 2);
                ctx.lineTo(-size, size / 2);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            }
            
            // 1. Draw vertical axis of rotation
            ctx.beginPath();
            ctx.moveTo(origin.x, 100);
            ctx.lineTo(origin.x, 400);
            ctx.stroke();

            // 2. Draw arrowhead for vertical axis
            drawArrowhead(ctx, origin.x, 100, -Math.PI / 2, 15);

            // 3. Draw horizontal line (the elastic rope)
            ctx.beginPath();
            ctx.moveTo(origin.x, origin.y);
            ctx.lineTo(400, origin.y);
            ctx.stroke();

            // 4. Draw label 'O' for the origin
            ctx.textAlign = 'center';
            ctx.fillText('O', origin.x - 20, origin.y + 10);

            // 5. Draw rotation indicator (curved arrow)
            const curveStart = { x: origin.x + 5, y: origin.y - 70 };
            const curveEnd = { x: origin.x + 25, y: origin.y - 120 };
            const controlPoint = { x: origin.x + 40, y: origin.y - 90 };

            ctx.beginPath();
            ctx.moveTo(curveStart.x, curveStart.y);
            ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, curveEnd.x, curveEnd.y);
            ctx.stroke();

            // 6. Draw arrowhead for rotation
            const tangentAngle = Math.atan2(curveEnd.y - controlPoint.y, curveEnd.x - controlPoint.x);
            // The arrowhead in the image is somewhat thick and filled
            const arrowheadSize = 12;
            ctx.save();
            ctx.fillStyle = '#333333';
            ctx.translate(curveEnd.x, curveEnd.y);
            ctx.rotate(tangentAngle);
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(-arrowheadSize, -arrowheadSize * 0.7);
            ctx.lineTo(-arrowheadSize * 0.7, 0);
            ctx.lineTo(-arrowheadSize, arrowheadSize * 0.7);
            ctx.closePath();
            ctx.fill();
            ctx.restore();


            // 7. Draw label 'ω' (omega)
            ctx.font = 'italic 24px serif';
            ctx.textAlign = 'left';
            ctx.fillText('ω', origin.x + 50, origin.y - 105);

            // 8. Draw labels 'L₀, M, k'
            ctx.font = '24px serif';
            ctx.textAlign = 'center';
            // Using Unicode subscript zero for L₀
            ctx.fillText('L\u2080, M, k', (origin.x + 400) / 2, origin.y - 25);
        };
    </script>
</body>
</html>